import React from 'react';
import ReactDOM from 'react-dom';
import TabBar from '../components/tabbar/tabBar'
import request from '../utils/request';
import { PullToRefresh, Button } from 'antd-mobile';

function genData(pageIndex = 1  ) {
  let dataArr = [];
  request.post(
    '/post/getUsersFromPage',
  {"page": pageIndex, "skip":false}).then(
    res => {
      dataArr = res.data.users
    }
  )
  return dataArr;
}

class Friend extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      down: false,
      height: document.documentElement.clientHeight,
      data: [],
      pageIndex: 0,
      isEnd:  false,
      modelOne: false,
      modelOneDom: '',
      currentName: ''
    };
  }

  componentWillMount() {
    request.post(
      '/post/getUsersFromPage',
      {"page": this.state.pageIndex, "skip":false}).then(
        res => {
          if(res.data.success) {
            this.setState({
              data: res.data.users
            })
          }
        }
      )
  }

  onRefresh = () => {
    this.setState({ 
      refreshing: true, 
      pageIndex: ++this.state.pageIndex
    });
    request.post(
      '/post/getUsersFromPage',
      {"page": this.state.pageIndex, "skip":false}).then(
        res => {
          if(res.data.maxSize >= this.state.pageIndex) {
            this.setState({
              isEnd: true
            })
          }
          if(res.data.success) {
            this.setState({
              data: res.data.users
            })
          }
        }
    )
    setTimeout(() => {
      this.setState({ 
        refreshing: false 
      });
    }, 1000);
  }
  changeVal = (e) => {
    this.setState({
      currentName: e.target.value
    })
  }
  changeName = (item,key) => {
    var dom = '';
    new Promise((resolve,reject)=>{
      this.setState({
        currentName: item.name
      })
      resolve(this.state);
    })
    .then(res => {
      dom =
        <div style={{position: 'fixed', top: '0', left: '0',right: '0', bottom: '0', background: 'rgba(0,0,0,0.8)'}}>
          <div style={{width: '75%',height: '200px',position:'absolute',top:'20%',left: '20%',background: '#fff'}}>
            <p>
              <b>name:</b>
              <input style= {{width: '90%', border: '1px solid #ddd'}} type="text" placeholder={this.state.currentName}  onChange={this.changeVal.bind(this)} />
            </p>
            <button onClick={this.saveChange.bind(this, key)}>save</button>
          </div>
        </div>;
      this.setState({
        modelOne: true,
        modelOneDom: dom
      })
    })
  }

  saveChange = (key) => {
    let newData = this.state.data;
    newData[key].name = this.state.currentName;
    this.setState({
      data: newData,
      modelOne: false
    })
  }
  render() {
    return (<div>
      <PullToRefresh
        damping={60}
        ref={el => this.ptr = el}
        style={{
          height: this.state.height,
          overflow: 'auto',
        }}
        indicator={this.state.down ? {} : { deactivate: '上拉可以刷新' }}
        direction={this.state.down ? 'down' : 'up'}
        refreshing={this.state.refreshing}
        onRefresh={this.onRefresh.bind(this)}
      >
        {this.state.data.map((item,index)=> (
          <ListItem {...item} theKey={index} key={index} changeName= {this.changeName} saveChange= {this.saveChange}/>
        ))}
        {
          this.state.isEnd ? <p>别扯了，到底了</p> : ''
        }
      </PullToRefresh>
      {
        this.state.modelOne ? 
        this.state.modelOneDom
        : ''
      }
    </div>);
  }
}

class ListItem extends React.Component {
  changeName = (item,key) => {
    this.props.changeName(item,key)
  }
  render() {
    return (
        <div style={{ textAlign: 'left', padding: 20 }}>
        {
          <div>
            <b>name：{this.props.name}</b> 
            <p>
              <img src={this.props.avatar_url} alt="" width="100" />
            </p>
            <b>注册时间： {this.props.regsiterTime}</b>
            <button onClick={this.changeName.bind(this, this.props, this.props.theKey)}>修改名字</button>
          </div>
        }
      </div>
    )
  }
}

export default Friend;